<template>
	<view class="scan-door">
		<!-- 顶部栏 -->
		<view class="header">
			<image :src="$IMG_URL('/static/member/open_door.png')" mode="aspectFit" class="refresh-icon"
				@click="refreshQRCode"></image>
		</view>

		<!-- 二维码区域：调整后水平居中 -->
		<view v-if="hasAuthority" class="qr-code-box">
			<image :src="qrCodeUrl" class="qr-code"></image>
			<view class="tips">
				<!-- <view>开门码10秒内有效，截图录屏无效</view>
				<view>目前部分设备支持扫码开门</view> -->
				<text class="tips-text">{{tipsMsg}}</text>
				<view class="refresh-btn" @click="refreshQRCode">
					<image :src="$IMG_URL('/static/member/load.png')" class="qr-shua"></image>
					<text> 刷新二维码</text>
				</view>
			</view>
		</view>

		<!-- 刷新按钮 -->
		<view v-else class="refresh-area">
			<image :src="$IMG_URL('/static/member/yjxy.png')" mode="aspectFit" class="load-icon"></image>
			<view class="text-cont">您暂无会员卡权限，请先购买</view>
			<view class="new-refresh-btn" @click="refreshQRCode">
				去购买会员卡
			</view>
		</view>
	</view>
</template>

<script>
	import {
		qrcode
	} from '@/api/common.js'
	export default {
		data() {
			return {
				qrCodeUrl: '', // 接口返回的二维码地址
				tipsMsg: '', // 接口返回的提示文字（如“开门码10秒内有效...”）
				hasAuthority: false, // 是否有权限（true=authority=1，false=其他）
				timer: null, // 二维码倒计时定时器
				countdown: 10, // 二维码有效期倒计时（与接口“10秒有效”对应）
				captureCallback: null // 存储截图回调，用于后续移除监听
			}
		},
		onLoad() {
			this.registerCaptureListener()
			this.refreshData()
		},
		onUnload() {
			// 页面销毁时移除监听，避免内存泄漏
			if (this.captureCallback) {
				uni.offUserCaptureScreen(this.captureCallback)
			}
		},
		methods: {
			registerCaptureListener() {

				this.captureCallback = () => {
					// console.log('用户截屏了')
					this.refreshData()
				}
				// 注册监听
				uni.onUserCaptureScreen(this.captureCallback)
			},

			refreshData() {
				console.log(1111)
				qrcode().then(({
					data: res
				}) => {
					if (res.code === 1) {
						const {
							authority,
							qrcode,
							msg
						} = res.data
						this.hasAuthority = authority === 1 // 更新权限状态
						this.qrCodeUrl = qrcode // 更新二维码地址
						// this.tipsMsg = msg // 更新提示文字
						this.tipsMsg = msg.replace('屏无效', '屏无效\n');
					} else {

						console.log('获取扫码开门失败')

						uni
							.showToast({
								title: '获取失败',
								icon: 'none'
							})
					}
				}).catch(err => {

					console.error('接口请求失败：', err)
					uni
						.showToast({
							title: '网络异常',
							icon: 'none'
						})
				})
			},


			// 手动刷新按钮
			refreshQRCode() {
				this.refreshData();
			},


		}

	}
</script>

<style lang="scss">
	page {
		background: #e9e9e9;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.scan-door {
		min-height: 100vh;
		width: 100%;

		.header {
			width: 100%;
			height: 274rpx;
			position: relative;

			.refresh-icon {
				width: 100%;
				height: 274rpx;
			}
		}


		.qr-code-box {
			width: 702rpx;
			height: 622rpx;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-top: 80rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 24rpx;
			position: absolute;
			top: 210rpx;
		}

		.qr-code {
			width: 316rpx;
			height: 316rpx;
			background: rgba(0, 0, 0, 0.00);
			margin-top: 32rpx;

		}

		.tips {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 26rpx;
			text-align: center;
		}

		.tips view {
			opacity: 0.6;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #000000;
		}

		.refresh-btn {
			width: 210rpx;
			height: 66rpx;
			border: 2rpx solid #73f0ea;
			border-radius: 12rpx;
			line-height: 62rpx;
			margin-top: 48rpx;

			.qr-shua {
				width: 22rpx;
				height: 22rpx;
				margin-right: 16rpx;
				line-height: 62rpx;
			}

			text {
				width: 140rpx;
				height: 40rpx;
				border: 2rpx solid rgba(0, 0, 0, 0.00);
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				color: #73f0ea;

			}
		}
	}



	.refresh-area {
		width: 702rpx;
		height: 428rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-top: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 24rpx;
		position: absolute;
		top: 210rpx;

		.load-icon {
			width: 150rpx;
			height: 108rpx;
			opacity: 0.5;
			margin: 40rpx 0 26rpx 0;
		}

		.text-cont {
			opacity: 0.6;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #000;
			margin-bottom: 74rpx;
		}

		.new-refresh-btn {
			width: 210rpx;
			height: 66rpx;
			border-radius: 12rpx;
			line-height: 66rpx;
			border: 2rpx solid #73f0ea;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: center;
			color: #73f0ea;
		}


	}
</style>